﻿<%@ taglib uri="/mytaglib" prefix="ct"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/includes.jsp"%>
<script>
	$(document).ready(function() {
		$(":checkbox,button").click(function(event){
			event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用
			}); 
		$(":checkbox").parent().click(function(event){
			event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用
			}); 
	});
	
	function changeCheck(userId){
		$("#"+userId).click();
	}
	
	function showUserDetail(id){
		myAjaxSumbmit('', '/user/ajax/entity?userId=' + id, '', function(
				data) {

			document.getElementById("editUserForm").reset();
			myValidate.resetForm();
			$('#userId').val(id);
			$('#loginId').val(data.loginId);
			$('#userName').val(data.userName);
			$('#contact').val(data.contact);
			$('#pwd').val(data.pwd);
			$('#email').val(data.email);
			$('#qq').val(data.qq);

			
			$('#userStatus').val(data.userStatus);
			$('#rmk').val(data.rmk);
			$('#uniqueCode').val(data.uniqueCode);

			$("#editUserModalLabel").text("查看");
			$("#editSaveUserBtn").hide();
			$('#editUserModal').removeClass("modal-warning");
			$('#editUserModal').addClass("modal-info");
			$(".has-error").removeClass('has-error');
			
			$('#editUserModal').modal('show');

		});
	}
	
	function toggleAll(){
		$(":checkbox").prop("checked",$("#allClickTag").is(':checked'));
	}
	
	var form = $("#editUserForm");
	var myValidate = form
	.validate({
		showErrors : function(errorMap, errorList) {
			for (var i = 0; i < errorList.length; i++) {
				$(errorList[i].element).parent().parent().addClass(
						'has-error');
			}
			this.defaultShowErrors();
		},
		success : function(label, element) {
			$(element).parent().parent().removeClass('has-error');
		}
	});
	
	function toUserAdd(){

		document.getElementById("editUserForm").reset();
		myValidate.resetForm();
		$(".has-error").removeClass('has-error');

		$("#editUserModalLabel").text("新增");
		$("#editSaveUserBtn").show();
		$("#editSaveUserBtn").attr("onclick", "saveUserAdd()");
		$('#editUserModal').removeClass("modal-warning");
		$('#editUserModal').removeClass("modal-info");
		
		$('#editUserModal').modal('show');
	}	
	
	function saveUserAdd(){

		if (form.valid()) {
			myAjaxSumbmit('editUserForm',
					'/user/ajax/save',
					'/user/list', function() {
						$('#editUserModal').modal('hide');
					});
		}
	}
	
	function toUserModify(id){
		myAjaxSumbmit('', '/user/ajax/entity?userId=' + id, '', function(
				data) {

			document.getElementById("editUserForm").reset();
			myValidate.resetForm();
			$('#userId').val(id);
			$('#loginId').val(data.loginId);			
			$('#userName').val(data.userName);			
			$('#contact').val(data.contact);			
			$('#pwd').val(data.pwd);			
			$('#email').val(data.email);			
			$('#qq').val(data.qq);			
						
			$('#userStatus').val(data.userStatus);			
			$('#rmk').val(data.rmk);			
			$('#uniqueCode').val(data.uniqueCode);			
			
			$("#editUserModalLabel").text("修改");
			$('#editUserModal').addClass("modal-warning");
			$('#editUserModal').removeClass("modal-info");
			$("#editSaveUserBtn").attr("onclick", "modifyUser(" + id + ")");
			$("#editSaveUserBtn").show();
			$(".has-error").removeClass('has-error');
			$('#editUserModal').modal('show');

		});
	}
	
	function modifyUser(id) {
		if (!(id === undefined) && id != '') {
			if (form.valid()) {
				myAjaxSumbmit('editUserForm',
						'/user/ajax/update',
						'/user/list', function() {
							$('#editUserModal').modal('hide');
						});
			}
		} else {
			alert("请选择修改项！");
		}
	}
	
	function delUserConfirm(id) {
		$("#delConfirmContent").html("确认删除这个用户？");
		$("#delConfirmButton").attr("onclick", "delUser(" + id + ")");
		$('#delModal').modal('show');
	}
	
	function delUser(id) {
		if (!(id === undefined) && id != '') {
			myAjaxSumbmit('noData',
					'/user/ajax/del?userId=' + id, '/user/list',
					function() {
						$('#delModal').modal('hide');
					});
		} else {
			alert("请选择删除项！");
		}
	}
	
	function delUsers(ids) {
			myAjaxSumbmit('userListForm',
					'/user/ajax/delAll', '/user/list',
					function() {
						$('#delModal').modal('hide');
					});		
	}
	
	function delAllUserConfirm(){
		var len=$(":checkbox[name=userIds]:checked").length;
		if(len>0){
			$("#delConfirmContent").html("确认删除这些用户？");
			$("#delConfirmButton").attr("onclick", "delUsers()");
			$('#delModal').modal('show');
		}else{
			alert("请选择删除项！");
		}
	}
	
	function configPermission(userId){
		
	}
	
	function searchUser(){
		mySubmit('searchUserForm', '/user/list');
	}
	
	function configRole(userId) {
		myAjaxSumbmit('',
				'/role/ajax/roles?userId='+userId,
				'', function(data) {		
			var selectData=new Array();
			var selectedRoles=new Array();
			for(var i=0;i<data.length;i++){
				selectData[i]={ id: data[i].roleId, text: data[i].roleName};
				if(data[i].selected){
					selectedRoles.push(data[i].roleId);
				}
			}
			$("#selectedRoles").select2({
				language : "zh-CN",
				data: selectData
			});
			$('#selectUserId').val(userId);
			
			$("#selectedRoles").val(selectedRoles).trigger("change");
			$('#configRoleModal').modal('show');		
		});
	}
	
	function saveUserRoles() {
		myAjaxSumbmit('configRoleForm',
				'/role/ajax/saveUserRoles',
				'', function(data) {			
			$('#configRoleModal').modal('hide');		
		});
	}
</script>



<div class="box-header">
	<form id="searchUserForm">
		<div class="col-sm-2">
			<h3 class="box-title">用户管理列表</h3>
		</div>
		<div class="col-sm-2">
			<input type="text" name="loginId" class="form-control input-sm pull-right" placeholder="登录账号" value="${searchUserPagingVo.loginId }">
		</div>
		<div class="col-sm-2">
			<input type="text" name="userName" class="form-control input-sm pull-right" placeholder="名字" value="${searchUserPagingVo.userName}">
		</div>
		<div class="col-sm-2">
			<div class="input-group">
				<input type="text" name="contact" " class="form-control input-sm pull-right" placeholder="电话号码" value="${searchUserPagingVo.contact}">
				<div class="input-group-btn">
					<button type="button" class="btn btn-sm btn-default" onclick="searchUser()">
						<i class="fa fa-search"></i>
					</button>
				</div>
			</div>
		</div>
	</form>
	<div class="box-tools">
		<button type="button" onclick="delAllUserConfirm()" class="btn btn-danger btn-flat">批量删除</button>
		<button type="button" onclick="toUserAdd()" class="btn btn-primary btn-flat">新增</button>
	</div>


</div>
<!-- /.box-header -->
<div class="box-body table-responsive no-padding">

	<form id="userListForm">
		<table class="table table-hover  table-bordered">
			<tbody>
				<tr>
					<th width="5%" onclick="changeCheck('allClickTag')">全选<input type="checkbox" onchange="toggleAll()" id="allClickTag"></th>
					<th>登录账号</th>
					<th>名字</th>
					<th>电话号码</th>
					<th>email</th>
					<th>qq</th>
					<th>创建人</th>
					<th>创建时间</th>
					<th>状态</th>
					<th>最后登录ip</th>
					<th>最后登录时间</th>
					<th>备注说明</th>
					<th>标示码</th>
					<th>是否在线</th>
					<th>是否自动登录</th>
				</tr>
			</tbody>

			<c:forEach var="user" items="${page.list}">

				<tr onclick="showUserDetail(${user.userId})" title="单击查看详情" id="user${user.userId}">
					<td align="center" onclick="changeCheck('userId${user.userId}')"><input type="checkbox" id="userId${user.userId}" name="userIds" title="选择" value="${user.userId}"></td>

					<td>${user.loginId}</td>
					<td>${user.userName}</td>
					<td>${user.contact}</td>
					<td>${user.email}</td>
					<td>${user.qq}</td>
					<td>${user.createdUser}</td>
					<td><fmt:formatDate value="${user.createdAt}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td><c:if test="${user.userStatus==0}">正常</c:if>
						<c:if test="${user.userStatus==1}">禁用</c:if>
						<c:if test="${user.userStatus==2}">删除</c:if></td>
					<td>${user.loginIp}</td>
					<td><fmt:formatDate value="${user.loginAt}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td>${user.rmk}</td>
					<td>${user.uniqueCode}</td>
					<td><c:if test="${user.liveStatus==0}">离线</c:if>
						<c:if test="${user.liveStatus==1}">在线</c:if></td>
					<td><c:if test="${user.loginAuto==0}">不自动登录</c:if>
						<c:if test="${user.loginAuto==1}">自动登录</c:if></td>
					<td>
						<div class="col-sm-4" align="center">
							<button type="button" onclick="toUserModify('${user.userId}')" class="btn btn-warning btn-flat btn-shorter">修改</button>
						</div>
						<div class="col-sm-4" align="center">
							<button type="button" onclick="delUserConfirm('${user.userId}')" class="btn btn-danger btn-flat btn-shorter">删除</button>
						</div>
						<div class="col-sm-4" align="center">
							<button type="button" onclick="configRole('${user.userId}')" class="btn btn-warning btn-flat btn-shorter">分配角色</button>
						</div>
					</td>
				</tr>

			</c:forEach>

		</table>
	</form>

</div>
<!-- /.box-body -->

<div class="box-footer clearfix">

	<ct:paging pageNo="${page.pageNo}" recordCount="${page.recordCount}" pageSize="${page.pageSize}" url="/user/list" />

</div>


<!-- Modal -->
<div class="modal fade " id="editUserModal" role="dialog" aria-labelledby="editUserModalLabel" data-backdrop="false">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal('editUserModal')">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="editUserModalLabel">新增</h4>
			</div>
			<div class="modal-body" id="editUserModalBody">
				<form class="form-horizontal" id="editUserForm">
					<input type="hidden" id="userId" name="userId">
					<div class="box-body">
						<div class="form-group ">
							<label for="loginId" class="col-sm-2 control-label">登录账号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="loginId" name="loginId" placeholder="登录账号" required>
							</div>
						</div>
						<div class="form-group ">
							<label for="userName" class="col-sm-2 control-label">名字</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="userName" name="userName" placeholder="名字">
							</div>
						</div>
						<div class="form-group ">
							<label for="contact" class="col-sm-2 control-label">电话号码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="contact" name="contact" placeholder="电话号码">
							</div>
						</div>
						<div class="form-group ">
							<label for="pwd" class="col-sm-2 control-label">密码</label>
							<div class="col-sm-10">
								<input type="password" class="form-control" id="pwd" name="pwd" placeholder="密码" required>
							</div>
						</div>
						<div class="form-group ">
							<label for="email" class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="email" name="email" placeholder="email">
							</div>
						</div>
						<div class="form-group ">
							<label for="qq" class="col-sm-2 control-label">qq</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="qq" name="qq" placeholder="qq">
							</div>
						</div>

						<div class="form-group ">
							<label for="userStatus" class="col-sm-2 control-label">状态</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="userStatus" name="userStatus" placeholder="状态">
							</div>
						</div>
						<div class="form-group ">
							<label for="rmk" class="col-sm-2 control-label">备注说明</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="rmk" name="rmk" placeholder="备注说明">
							</div>
						</div>
						<div class="form-group ">
							<label for="uniqueCode" class="col-sm-2 control-label">唯一标示码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="uniqueCode" name="uniqueCode" placeholder="唯一标示码">
							</div>
						</div>
					</div>
					<!-- /.box-body -->
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default " data-dismiss="modal" onclick="closeModal('editUserModal')">关闭</button>
				<button type="button" class="btn btn-primary" onclick="saveUserAdd()" id="editSaveUserBtn">保存</button>
			</div>

		</div>
	</div>
</div>

<div class="modal fade " id="configRoleModal" role="dialog"
	aria-labelledby="configRoleModal" data-backdrop="false">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close" onclick="closeModal('configRoleModal')">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="configRoleModalLabel">分配角色</h4>
			</div>
			<div class="modal-body" id="configRoleModalBody">
				<form class="form-horizontal" id="configRoleForm">
					<input type="hidden" id="selectUserId" name="selectUserId">
					<div class="box-body">
						<div class="form-group ">
							<label for="selectedRoles" class="col-sm-2 control-label">角色选择</label>
							<div class="col-sm-10">
								<select class="form-control select2" style="width: 100%;"
									id="selectedRoles" name="selectedRoles"  multiple="multiple">
								</select>
							</div>
						</div>
					</div>
					<!-- /.box-body -->
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default " data-dismiss="modal"
					onclick="closeModal('configRoleModal')">关闭</button>
				<button type="button" class="btn btn-primary"
					onclick="saveUserRoles()" id="editSaveBtn">保存</button>
			</div>

		</div>
	</div>
</div>




